<template>
    <div v-if="main">
        <div v-if="deleteAccount">
            <div>
                    <el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20" :rules="rules">
                        <table>
                            <caption>Primary A/C No</caption>
                            <tr>
                                <td>A/C No.</td>
                                <td>
                                    <el-form-item  prop="primaryAcc">
                                        <el-input v-model="queryForm.primaryAcc" :disabled="true"></el-input>
                                    </el-form-item>              
                                </td>
                            </tr>	
                        </table>
                    </el-form>
            </div>
            <div>
                <el-form ref="returnDate" :model="returnDate" class="formEmbedTable mt20">
                    <table>
                        <caption>Bank A/C No.</caption>
                        <tr>
                            <td>TBS A/C No</td>
                            <td>
                                <el-form-item prop="relateAcc">
                                    <el-input v-model="returnDate.relateAcc" :disabled="true"></el-input>
                                </el-form-item>
                            </td>	
                            <td>A/C Type</td>
                            <td>
                                <el-form-item prop="accType">
                                    <el-input v-model="returnDate.accType" :disabled="true"></el-input>
                                </el-form-item>
                            </td>	
                            <td>Action</td>
                            <td>
                                <el-form-item prop="Action">
                                    <el-input v-model="returnDate.Action" :disabled="true"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                </el-form>
            </div>
            <br></br>
        </div>

        <div v-if="addAccount">
            <div>
                <el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20" :rules="rules">
                    <table>
                        <caption>Primary A/C No</caption>
                        <tr>
                            <td>A/C No.</td>
                            <td>
                                <el-form-item  prop="primaryAcc">
                                    <el-input v-model="queryForm.primaryAcc" :disabled="true"></el-input>
                                </el-form-item>              
                            </td>
                        </tr>	
                    </table>
                </el-form>
            </div>
            <div>
                <el-form ref="returnDate" :model="returnDate" class="formEmbedTable mt20">
                    <table>
                        <caption>Fixed Deposit A/C No.</caption>
                        <tr>
                            <td>TBS A/C No</td>
                            <td>
                                <el-form-item prop="relateAcc">
                                    <el-input v-model="returnDate.relateAcc" :disabled="true"></el-input>
                                </el-form-item>
                            </td>	
                            <td>A/C Type</td>
                            <td>
                                <el-form-item prop="accType">
                                    <el-input v-model="returnDate.accType" :disabled="true"></el-input>
                                </el-form-item>
                            </td>	
                            <td>Action</td>
                            <td>
                                <el-form-item prop="Action">
                                    <el-input v-model="returnDate.Action" :disabled="true"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                </el-form>
            </div>
        <br></br>
        </div>
        <div class="btnArea mt20 tac">
            <el-button type="primary" @click="back()">Back</el-button>
        </div>
    </div>

</template>

<script>
	export default {
		name:'addOrHangAccount_detail',
        props:['toDetailData'],
		components:{
		},
        
		data(){
            return { 
               main:true,
               deleteAccount:false,
               addAccount:false,
               detailInfo:{},
               queryForm:{},
               returnDate:{},
            }   
        },
         mounted(){
            let _this = this
            console.log("_this.toDetailData",_this.toDetailData)
            _this.detailInfo = $.extend({}, _this.toDetailData)
            if('D' == _this.detailInfo.reqTP){
                _this.deleteAccount = true
                _this.addAccount = false
            }
            if('A' == _this.detailInfo.reqTP){
                _this.deleteAccount = false
                _this.addAccount = true
            }
            _this.queryForm.primaryAcc = _this.detailInfo.primaryAcc
            _this.returnDate.relateAcc = _this.detailInfo.relateAcc
            _this.returnDate.accType = _this.detailInfo.accType
            if('D' == _this.detailInfo.reqTP){
                 _this.returnDate.Action = "解挂"
            }
            if('A' == _this.detailInfo.reqTP){
                _this.returnDate.Action = "加挂"
            }
        },
		methods:{ 
            back(){
                this.$emit('back')
            },
          
		}
	}
</script>